<template>
	<view>
		<u-loading-page :loading="loading"></u-loading-page>
		<view class="pageHead" :style="{
			background: `url(${imgUrl}images/headBg.png) no-repeat`
		}">
			<view class="pageHead-block">
				<u-icon name="arrow-left" color="#fff" size="18" @click="handleClickBack"></u-icon>
				<view class="pageHead-block-title">内容学习</view>
			</view>
		</view>
		<view class="pageContent">
			<u-tabs
			  :list="tabList"
				@click="handleTabClick"
				:lineColor="`url(${lineBg}) 100% 100%`"
				:lineBgSize="'100%'"
				:activeStyle="{
					fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
					fontWeight: 'normal',
					fontSize: '36rpx',
					color: '#333333'
				}"
				:inactiveStyle="{
					fontFamily: 'Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20',
					fontWeight: 'normal',
					fontSize: '30rpx',
					color: '#666666'
				}"
			></u-tabs>
			<view class="pageContent-tabBlock">
				<scroll-view style="width: 630rpx" scroll-x="true">
					<view style="display: flex;">
						<view v-for="(item, index) in tabSecondList" :key="index">
							<view
								@click="handleClickSecond(index)"
								:class="{
									'tabActive': index == secondIndex,
									'tabUnactive': index != secondIndex
								}"
							>{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="pageContent-tabBlock-right">
					<text class="pageContent-tabBlock-right-font">筛选</text>
					<u-icon name="arrow-down-fill" color="#000" :size="10"></u-icon>
				</view>
			</view>
			<scroll-view style="height: 65vh" scroll-y="true">
				<view class="learnBlock">
					<view v-for="(item, index) in learnList" :key="index" @click="handleClickDetail(item)">
						<view class="learnItem">
							<view class="learnItem-img" :style="{
								background: `url(${imgUrl}${item.video_img}) no-repeat 100% 100%`
							}">
								<view class="learnItem-img-time">{{ item.video_time }}</view>
							</view>
							<view class="learnItem-content" v-html="item.content"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getLearnTypeList, getLearnList } from '@/api/common.js'
	export default {
		data() {
			return {
				loading: false,
				learnList: [
					{
						img: this.$ImgUrl + 'images/avater.png',
						time: '06:06',
						content: '高情商攻略:情商认知提升很多人看完都要哭了孩子...'
					},
					{
						img: this.$ImgUrl + 'images/avater.png',
						time: '06:06',
						content: '高情商攻略:情商认知提升很多人看完都要哭了孩子...'
					},
					{
						img: this.$ImgUrl + 'images/avater.png',
						time: '06:06',
						content: '高情商攻略:情商认知提升很多人看完都要哭了孩子...'
					},
					{
						img: this.$ImgUrl + 'images/avater.png',
						time: '06:06',
						content: '高情商攻略:情商认知提升很多人看完都要哭了孩子...'
					}
				],
				current: 0,
				imgUrl: this.$ImgUrl,
				secondIndex: 0,
				lineBg: this.$ImgUrl + 'images/lineBg.png',
				tabList: [
					{
						name: '内容分类'
					},
					{
						name: '内容分类'
					},
					{
						name: '内容分类'
					}
				],
				tabOldList: [],
				tabSecondList: [
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					},
					{
						name: '标题'
					}
				]
			}
		},
		onShow() {
			this.tabList = []
			this.tabSecondList = []
			this.learnList = []
			getLearnTypeList({
				channel: uni.getStorageSync('channel')
			})
			.then(res => {
				const { code, data } = res
				if (code == 200001) {
					this.tabOldList = data
					data.map(item => {
						if (!item.parent) {
							this.tabList.push({
								name: item.name,
								id: item.id
							})
						}
					})
					data.map(item => {
						if (data[0].parent && item.parent && item.parent.id == this.tabList[0].id) {
							this.tabSecondList.push({
								name: item.name,
								id: item.id
							})
						}
					})
					this.getList()
				}
			})
		},
		methods: {
			handleClickBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getList() {
				this.loading = true
				let typeId = ''
				if (this.tabSecondList.length > 0) {
					typeId = this.tabSecondList[this.secondIndex].id
				} else {
					typeId = this.tabList[this.current].id
				}
				getLearnList({
					channel: uni.getStorageSync('channel'),
					type_id: typeId
				})
				.then(res => {
					const { code, data } = res
					if (code == 200001) {
						if (this.learnList.length == 0) {
							this.learnList = data
						} else {
							this.learnList = this.learnList.concat(data)
						}
					}
					this.loading = false
				})
				.catch(e => {
					this.loading = false
				})
			},
			handleTabClick(e) {
				this.current = e.index
				this.tabSecondList = []
				this.tabOldList.map(item => {
					if (item.parent_id && item.parent_id == e.id) {
						this.tabSecondList.push({
							name: item.name,
							id: item.id
						})
					}
				})
				this.getList()
			},
			handleClickSecond(index) {
				this.secondIndex = index
				this.getList()
			},
			handleClickDetail(item) {
				uni.setStorageSync('courseDetail', item)
				uni.navigateTo({
					url: '/pages/courseDetails/courseDetails'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageHead{
		width: 100%;
		height: 462rpx;
		background-size: 100% 100%;
		position: relative;
		&-block{
			display: flex;
			align-items: center;
			padding-left: 28rpx;
			padding-top: 110rpx;
			&-title{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				padding-left: 220rpx;
			}
		}
	}
	.pageContent{
		width: 100%;
		position: absolute;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background: #F4F4F4;
		top: 384rpx;
		.learnBlock{
			display: flex;
			flex-wrap: wrap;
			.learnItem{
				margin-top: 30rpx;
				margin-left: 27rpx;
				width: 336rpx;
				height: 332rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				&-img{
					width: 336rpx;
					height: 218rpx;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
					&-time{
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 18rpx;
						color: #FFFFFF;
						padding-top: 176rpx;
						padding-left: 262rpx;
					}
				}
				&-content{
					padding: 24rpx 16rpx 24rpx 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
		&-tabBlock{
			display: flex;
			align-items: center;
			padding-top: 38rpx;
			.tabActive{
				width: 88rpx;
				height: 50rpx;
				background: #0165FB;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
			.tabUnactive{
				width: 88rpx;
				height: 50rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
			}
			&-right{
				display: flex;
				align-items: center;
				padding-right: 20rpx;
				&-font{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
</style>
